<template>
    <div id="myChartGauge_2" :style="{width: '150px', height: '100px'}"></div>
</template>

<script>
    import echarts from 'echarts';

    export default {
        name: "gauge",
        props: {
            listData:Number
        },
        data() {
            return {
                option: {},
                max: 100,
                data: {
                    name: '标题',
                    num: this.listData
                },
            }
        },
        watch:{
            listData: {
                deep: true,
                handler() {
                    this.num=this.listData
                    this.inIt();
                },
            },
        },
        mounted() {
            this.inIt();
        },
        methods: {
            inIt() {
                let myChart = echarts.init(document.getElementById('myChartGauge_2'));
                let that = this;
                this.option = {
                    grid:{
                        right:80,
                        top:20,
                        bottom: 20,
                        left:80
                    },
                    angleAxis: {
                        show: false,
                        max: that.max * 3 / 2, //这里将极坐标最大值转换成仪表盘的最大值，(360度除以240度)
                        type: 'value',
                        startAngle: 210, //极坐标初始角度，从第一象限算起，大约在7-8点钟角度之间
                        splitLine: {
                            show: false //隐藏坐标
                        }
                    },
                    barMaxWidth: 8, //圆环宽度
                    radiusAxis: { //隐藏坐标
                        show: false,
                        type: 'category',
                    },
                    polar: { //设置圆环位置和大小
                        center: ['50%', '50%'],
                        radius: '70'
                    },
                    series: [{

                        type: 'bar',
                        data: [{ //上层圆环，用于显示真实数据
                            value: that.data.num,
                            itemStyle: {
                                name: "业务指标",
                                color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                                    type: 'linear',
                                    x: 0,
                                    y: 1,
                                    x2: 1, //从左到右 0-1
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: '#405848' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#58a543' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(255, 255, 255, 0.2)', //加白色阴影产生高亮效果
                                shadowBlur: 10
                            }
                        }],
                        barGap: '100%', //柱间距离,用来将上下两层圆环重合
                        coordinateSystem: 'polar', //类型，极坐标
                        roundCap: false, //顶端圆角
                        z: 2 //圆环层级，和zindex相似
                    }, { //下层圆环，用于显示最大值
                        type: 'bar',
                        data: [{
                            value: that.max,
                            itemStyle: {
                                color: '#424a4c',
                                shadowColor: 'rgba(0, 0, 0, 0.1)', //加白色阴影产生高亮效果
                                shadowBlur: 5,
                                shadowOffsetY: 2
                            }
                        }],
                        barGap: '-100%', //柱间距离,用来将上下两层圆环重合
                        barCateGoryGap: 10,
                        coordinateSystem: 'polar', //类型，极坐标
                        roundCap: false, //顶端圆角
                        z: 1 //圆环层级，和zindex相似
                    },
                        { //仪表盘
                            type: 'gauge',
                            radius: '100%',
                            startAngle: 210, //起始角度，同极坐标
                            endAngle: -30, //终止角度，同极坐标
                            max: that.max,
                            splitNumber: 5, //分割线个数（除原点外）
                            axisLine: { // 坐标轴线
                                show: false
                            },
                            pointer: {
                                show: true,
                                length: "70%",
                                width:1
                            },
                            itemStyle:{
                                color:'#fffa6a'
                            },
                            axisTick:{
                                show:false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },

                            title: {
                                fontWeight:'bold',
                                show: true,
                                offsetCenter: [0, '40%'],
                                color: '#9faf42',
                                fontSize: 22,
                                //backgroundColor:"#D8d8d8",
                                borderRadius: 21,
                                padding: 5
                            },
                            detail: {
                                show:false
                            },
                            data: [{
                                value: that.data.num,
                                name: that.data.num + '%'
                            }]
                        }
                    ]
                };
                // 绘制图表
                myChart.setOption(this.option);
                setTimeout(function () {
                    window.onresize = function () {
                        myChart.resize();
                    }
                }, 200)
            }
        },

    }
</script>

<style scoped>

</style>
